<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>工作：{{ job.name }}</p>
  <p>薪资：{{ job.salary }}</p>
  <button @click="update">修改信息</button>
</template>

<script>

import {ref} from 'vue'

export default {
  name: "SetupDemo",
  // ref 动态数据绑定
  setup() {

    // 使用ref包裹的数据，就是响应式数据
    // 然后使用 .value 更新内容，数据就是相应式数据
    // 在模板中会自动调用数据的value属性，所以模板中可以直接使用
    const name = ref('小马奔腾')
    const age = ref(18)
    const job = ref({
      name: '开发工程师',
      salary: '30K'
    })

    const update = () => {
      const r = Math.floor(100 * Math.random())
      name.value = '大飞哥' + r
      age.value = r

      // 修改工作信息
      job.value.name = '高级开发工程师'
      job.value.salary = r + 'K'
    }

    return {
      name,
      age,
      job,
      update
    }
  }
}
</script>

<style scoped>

</style>